import React from "react";
//引入路由导航
import { Link } from "react-router-dom";
//引入封装好的头部组件
import Header from '../components/header'
import "../assets/css/home.css";
import imgUrl1 from "../assets/images/1.jpg";
import imgUrl2 from "../assets/images/2.jpg";
import imgUrl3 from "../assets/images/3.jpg";
import imgUrl4 from "../assets/images/4.jpg";

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      // img:require('../assets/images/1.jpg'),
      goodslist: [
        {
          id: 1,
          goodsname: "华为",
          price: 999,
          img: imgUrl1,
        },
        {
          id: 2,
          goodsname: "苹果",
          price: 7889,
          img: imgUrl2,
        },
        {
          id: 3,
          goodsname: "小米",
          price: 1234,
          img: imgUrl3,
        },
        {
          id: 4,
          goodsname: "诺基亚",
          price: 15,
          img: imgUrl4,
        },
      ],
    };
  }
  //封装一个跳转事件
  goOrder(id) {
    this.props.history.push({
      pathname: "/order",
      state: {
        id,
      },
    });
  }
  render() {
    const { goodslist } = this.state;
    return (
      <div className="home">
        {/* 头部组件渲染 */}
        <Header></Header>
        <h1>首页</h1>
        <div>
          {/* <img src={imgUrl} alt=""/> */}
          {/* <img src={this.state.img} alt=""/> */}
          <ul>
            {goodslist.map((item) => {
              return (
                //   路由导航跳转
                // <li key={item.id} className="goodslist">
                //   <Link to={
                //     {
                //       pathname:'/order',
                //       state:{
                //         id:item.id
                //       }
                //     }
                //   }>
                //     <div className="imgUrl">
                //       <img src={item.img} alt="" />
                //     </div>
                //     <div className="goodsinfo">
                //       <p>商品名称：{item.goodsname}</p>
                //       <p>商品价格：{item.price}</p>
                //     </div>
                //   </Link>
                // </li>
                <li
                  onClick={this.goOrder.bind(this, item.id)}
                  key={item.id}
                  className="goodslist"
                >
                  <div className="imgUrl">
                    <img src={item.img} alt="" />
                  </div>
                  <div className="goodsinfo">
                    <p>商品名称：{item.goodsname}</p>
                    <p>商品价格：{item.price}</p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
export default Home;
